<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card>
        <!-- 搜索 -->
        <search-form
          :showpopups.sync="showpopups"
          @searchClick="searchClick"
          @clearClick="getArticlesList"
          @onaddnewuser="onaddnewuser"
        />
        <!-- 警告 -->
        <el-alert style="line-height:10px" type="info" show-icon>
          <template #title>{{ `数据一共 ${total} 条` }}</template>
        </el-alert>
        <!-- 表格 -->
        <table-list
          v-loading="Tableloading"
          :table-data="tableData"
          :showpopups.sync="showpopups"
          @delClick="getArticlesList"
          @onpreview="onpreview"
          @eidtBtn="eidtBtn"
        />
        <!-- 分页 -->
        <el-row type="flex" justify="end" style="margin-top:20px">
          <el-pagination
            v-if="total > 10"
            background
            layout=" prev, pager, next,sizes,jumper"
            :total="total"
            :page-sizes="[10, 20, 30]"
            :page-size="page.pagesize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </el-row>
      </el-card>
    </div>
    <!-- 弹出层 -->
    <popups
      v-if="showpopups"
      :state="state"
      :showpopups.sync="showpopups"
      :rule-form="ruleForm"
      @onClose="onClose"
      @btnOk="getArticlesList"
    />
  </div>
</template>

<script>
import tableList from './component/tableList.vue'
import searchForm from './component/searchForm.vue'
import { getArticlesList } from '@/api/articles'
import popups from './component/popups.vue'
export default {
  name: '',
  components: {
    searchForm,
    tableList,
    popups
  },
  props: {},
  data() {
    return {
      state: true,
      Tableloading: false,
      tableData: [],
      showpopups: false,
      ruleForm: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      page: {
        page: 1,
        pagesize: 10
      },
      total: 0
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getArticlesList()
  },
  mounted() {},
  methods: {
    // 搜索
    async searchClick(row) {
      this.Tableloading = true
      const { data } = await getArticlesList(row)
      this.tableData = data.items
      this.total = data.counts
      this.Tableloading = false
    },
    // 获取表单数据
    async getArticlesList() {
      this.Tableloading = true
      const { data } = await getArticlesList(this.page)
      this.tableData = data.items
      this.total = data.counts
      this.Tableloading = false
    },
    // 预览
    onpreview(data) {
      this.ruleForm = data
      this.showpopups = true
      this.state = false
    },
    // 新增
    onaddnewuser() {
      this.showpopups = true
      this.state = true
    },
    // 修改
    eidtBtn(data) {
      this.ruleForm = data
      this.showpopups = true
      this.state = true
    },
    // 关闭弹出层
    onClose() {
      this.ruleForm = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
    },
    // 分页
    handleSizeChange(n) {
      this.page.pagesize = n
      this.getArticlesList()
    },
    handleCurrentChange(n) {
      this.page.page = n
      this.getArticlesList()
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
